<template>
  <div class="module">
    <MTitle ref="title" icon="gjtj" :filter="false"></MTitle>
    <MBox boxCls="box3">
      <div class="content-box">
        <div class="header-box">
          <div class="left-box">
            <img src="./images/1.png" alt="" />
            <div class="box">
              <img src="./images/1-title.png" alt="" />
              <div class="num one">{{ topData[0] }}</div>
            </div>
          </div>
          <div class="right-box">
            <img src="./images/2.png" alt="" />
            <div class="title">二级告警</div>
            <div class="num two">{{ topData[1] }}</div>
          </div>
          <div class="right-box">
            <img src="./images/3.png" alt="" />
            <div class="title">三级告警</div>
            <div class="num three">{{ topData[2] }}</div>
          </div>
        </div>
        <div class="bottom-box">
          <ul class="ul">
            <li class="li" :class="{ jump: item.jump }" v-for="(item, index) in leftList" :key="index" @click="jump(item)">
              <div class="title">{{ item.label }}</div>
              <div class="value">{{ item.count }}</div>
            </li>
          </ul>
        </div>
      </div>
    </MBox>
  </div>
</template>

<script>
import MTitle from '../base-com/m-title/m-title'
import MBox from '../base-com/m-box/m-box'
import { shipMixin } from '../../mixins/mixin'
import { warningCountStatistics, warningStatistics } from '@/api/warnings'

export default {
  mixins: [shipMixin],
  components: {
    MTitle,
    MBox
  },
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      topData: [0, 0, 0],
      leftList: [
        {
          label: '今日告警数',
          count: 0
        },
        {
          label: '待处理告警',
          count: 0,
          jump: true,
          jumpObjAnji: {
            active: 2
          },
          jumpObjJianguan: {
            active: 0
          }
        },
        {
          label: '今日已处理告警',
          count: 0,
          jump: true,
          jumpObjAnji: {
            active: 5,
            processingTime: 'today'
          },
          jumpObjJianguan: {
            active: 1,
            processingTime: 'today'
          }
        }
      ]
    }
  },
  methods: {
    shipChange() {
      this.initData()
    },
    initData() {
      const searchData = {}
      searchData.shipId = this.shipId
      warningCountStatistics(searchData).then((res) => {
        // todayProcessedWarningCount
        // 今日已处理告警数量
        // integer(int32)
        // todayUnProcessedWarningCount
        // 今日待处理告警数量
        // integer(int32)
        // todayWarningCount
        // 今日告警数
        // integer(int32)
        // totalProcessedTimeoutCount
        // 处理超时总数
        // integer(int32)
        // totalProcessedWarningCount
        // 已处理告警总数
        // integer(int32)
        // totalWarningCount
        // 告警总数
        // integer(int32)
        // totalWarningTimeoutCount
        // 确警超时总数
        const result = res.result || {}
        this.leftList[0].count = result.todayWarningCount
        this.leftList[1].count = result.todayUnProcessedWarningCount
        this.leftList[2].count = result.todayProcessedWarningCount
      })
      warningStatistics(searchData).then((res) => {
        const result = res?.result?.level || []
        const topData = []
        result.map((item) => {
          topData.push(item.count)
        })
        this.topData = topData
      })
    },
    objectToQuery() {
      let obj = arguments[0]
      let prefix = arguments[1]
      if (typeof obj !== 'object') return ''
      const attrs = Object.keys(obj)
      return attrs.reduce((query, attr, index) => {
        // 判断是否是第一层第一个循环
        if (index === 0 && !prefix) query += '?'
        if (typeof obj[attr] === 'object') {
          const subPrefix = prefix ? `${prefix}[${attr}]` : attr
          query += this.objectToQuery(obj[attr], subPrefix)
        } else {
          if (prefix) {
            query += `${prefix}[${attr}]=${obj[attr]}`
          } else {
            query += `${attr}=${obj[attr]}`
          }
        }
        // 判断是否是第一层最后一个循环
        if (index !== attrs.length - 1) query += '&'
        return query
      }, '')
    },
    jump(item) {
      if (this.type === 'anji') {
        if (item.jumpObjAnji.time) {
          item.jumpObjAnji.time = this.$moment(new Date()).format('YYYY-MM-DD')
        }
        if (item.jumpObjAnji.processingTime) {
          item.jumpObjAnji.processingTime = this.$moment(new Date()).format('YYYY-MM-DD')
        }
        if (this.shipId) {
          item.jumpObjAnji.shipId = this.shipId
        } else {
          delete item.jumpObjAnji.shipId
        }
        const params = this.objectToQuery(item.jumpObjAnji)
        window.open('/modules/maintenance/video/warnMessage' + params)
      } else if (this.type === 'jianguan') {
        if (item.jumpObjJianguan.time) {
          item.jumpObjJianguan.time = this.$moment(new Date()).format('YYYY-MM-DD')
        }
        if (item.jumpObjJianguan.processingTime) {
          item.jumpObjJianguan.processingTime = this.$moment(new Date()).format('YYYY-MM-DD')
        }
        if (this.shipId) {
          item.jumpObjJianguan.shipId = this.shipId
        } else {
          delete item.jumpObjJianguan.shipId
        }
        const params = this.objectToQuery(item.jumpObjJianguan)
        window.open('/warning/list' + params)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.content-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .header-box {
    padding: 15px 0 15px 15px;
    display: flex;
    .left-box {
      flex: 1;
      display: flex;
      > img {
        width: 43px;
        height: 55px;
        margin-top: 9px;
      }
      > .box {
        flex: 1;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        > img {
          width: 80px;
          height: 15px;
          display: block;
          margin: 0 auto 20px;
        }
      }
    }
    .right-box {
      width: 100px;
      position: relative;
      text-align: center;
      &:before {
        content: '';
        display: block;
        width: 2px;
        height: 89px;
        background: url('./images/line.png') no-repeat center;
        background-size: 100% 100%;
        position: absolute;
        top: 50%;
        left: -1px;
        transform: translate(0, -50%);
      }
      > img {
        width: 30px;
        height: 38px;
        display: block;
        margin: 0 auto;
      }
      .title {
        font-size: 16px;
        color: #fff;
        line-height: 29px;
      }
    }
    .num {
      font-size: 16px;
      line-height: 24px;
      &.one {
        color: #cd2437;
        font-size: 22px;
        font-weight: 600;
      }
      &.two {
        color: #eea10c;
      }
      &.three {
        color: #fff225;
      }
    }
  }
  .bottom-box {
    .ul {
      display: flex;
      .li {
        flex: 1;
        text-align: center;
        &.jump {
          cursor: pointer;
          .value {
            position: relative;
            &:after {
              content: '';
              display: block;
              width: 10px;
              height: 2px;
              background: #41bce0;
              position: absolute;
              bottom: -5px;
              left: 50%;
              transform: translate(-50%, 0);
            }
          }
        }
        .title {
          font-size: 14px;
          line-height: 14px;
          color: #fff;
        }
        .value {
          font-size: 16px;
          line-height: 16px;
          color: #41bce0;
          margin: 8px 0 16px;
        }
      }
    }
  }
}
</style>
